@charset "UTF-8";
/* CSS Document */

/*通用样式*/
html{
	width: 100%;
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial,'Microsoft YaHei';
	overflow: hidden;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
img{border:0;}
.d-s{color: #1a8dd2;margin-left:10px;}
.f-b{color: #30deec;font-size:14px;}

/*地图*/
/*地图*/
.map{
	position: relative;
	width: 100%;
	height: 100%;
	background: #00192e;
	z-index: 0;
}
.map-tip{
	position:absolute;
	left:200px;
	top:50px;
	width: 305px;
	color: #87b0d0;
	font-size:13px;
	z-index: 500;
}
.map-tip-title{
	width: 305px;
	height: 32px;
	background:url(../img/map-tip-title.png) no-repeat;
}
.map-tip-title h3{
	position: relative;
	top:8px;
	left:26px;
	width:110px;
	font-size: 14px;
	text-align: center;
}
.map-tip-cont{
	width: 305px;
	background:url(../img/map-tip-cont.png) repeat;
}
.map-tip-cont p{
	margin:0;
	padding:15px 25px 0 25px;
	line-height: 24px;
}
.map-tip-bottom{
	width: 305px;
	height: 34px;
	background:url(../img/map-tip-bottom.png) no-repeat;
}
/*左侧弹窗展开*/
/*@media screen and (min-width:1680px){
    .left-window-open{
        width: 800px;
		height: 552px;
       }
}
@media screen and (max-width:1670px){
    .left-window-open{
        width: 550px;
		height: 380px;
       }
}*/
.left-window-open{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 800px;
	height: 552px;
	background: url(../img/left-window-bg.png) no-repeat;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	z-index: 5;
}
.close{
	position: absolute;
	right: 25px;
	top: 8px;
	cursor: pointer;
    width: 19px;
	height: 19px;
	background: url(../img/narrow-ico.png) no-repeat;
}
.open{
	position: absolute;
	right: 25px;
	top: 8px;
	cursor: pointer;
    width: 19px;
	height: 19px;
	background: url(../img/enlarge-ico.png) no-repeat;
}
.date-tab{
	position: absolute;
	right: 10px;
	top: 40px;
}
.date-tab li{
	float: left;
	margin-right: 5px;
}
.date-tab li a{
	display: block;
	padding: 3px 10px;
	font-size: 10px;
	border-radius: 20px;
	border:1px solid #305a7c;
	color: #3796f4;
}
.date-tab li a:hover,
.date-tab li a.on{
	color: #35eae6;
}
.searchbar{
	position: absolute;
	top: 82px;
	left: 13px;
}
.searchbar li{
	float: left;
	margin-right: 3px;
}
.searchbar li a{
	display: block;
	position: relative;
	width: 126px;
	height: 43px;
	line-height: 43px;
	background: url(../img/btn-ico1-bg.png) no-repeat;
	font-size: 18px;
	color: #87b0d0;
	text-align: center;
}
.searchbar li a:hover,
.searchbar li a.on{
	color: #35eae6;
}
.searchbar li a.searchbtn{
	background: url(../img/btn-ico1-search.png) no-repeat;
}
.downmenu{
	position: absolute;
	top: 126px;
	left: 13px;
	width: 738px;
	height: auto;
	background: #061a27;
	border: 2px solid #589ad6;
	padding: 15px;
	z-index: 200;
}
.downmenu a{
	display: inline-block;
	font-size:16px;
	color: #87b0d0;
	text-align: left;
	margin:0 10px;
	background: #061a27;
	white-space:nowrap;
	padding:5px 0;
}
.downmenu a:hover{
	color: #35eae6;
}
i.down-arrow-ico{
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url(../img/down-arrow-ico.png) no-repeat;
	margin-left: 5px;
}
.hot-port{
	position: absolute;
	top: 210px;
	left: 22px;
	width: 110px;
	height: 273px;
	padding: 3px 0;
	overflow: hidden;
}
.hot-port li{
	padding: 3px 5px;
	text-align: center;
}
.hot-port li a{
	font-size: 16px;
	color: #82d1ff;
}
.thematic{
	position: absolute;
	top: 220px;
	left: 165px;
	width: 570px;
}
.them-tab{
	float: left;
	width: 113px;
	padding-left: 15px;
	padding-right: 15px;
}
.them-tab li{
	margin-bottom: 15px;
}
.them-tab li a{
	display: block;
	width: 113px;
	height: 27px;
	line-height: 27px;
	background: url(../img/btn1-bg.png) no-repeat;
	font-size: 14px;
	color: #82d1ff;
	text-align: center;
}
.them-tab li a:hover,
.them-tab li a.on{
	background: url(../img/btn1-on-bg.png) no-repeat;
}
.tab-content{
	float: right;
	width: 390px;
	height: 250px;
	padding-left: 15px;
	padding-right: 15px;
	overflow-y: hidden;
}
.tab-content p{
	color: #76c0ea;
	font-size: 14px;
	padding-top: 0;
	margin-top: 0;
	padding-bottom: 5px;
}
.tab-content p a{
	color: #82d1ff;
	font-size: 12px;
	padding-top: 0;
	margin-right: 10px;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
.left-footer{
	position: absolute;
	bottom: 18px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #82d1ff;
	font-size: 14px;
}
.imger{
	position: relative;
	top: 7px;
	margin-right: 30px;
}

/*左侧弹窗隐藏*/
.left-window-hidden{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 800px;
	height: 57px;
	line-height: 57px;
	text-align: center;
	color: #82d1ff;
	font-size: 14px;
	background: url(../img/left-window-small.png) no-repeat;
}

/*右侧弹窗隐藏*/
.right-window-hidden{
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 100%;
	background: url(../img/right-window-bg.png) left repeat-y;
}

/*右侧弹窗*/
.right-window-open{
	position: absolute;
	right: 0;
	top: 0;
	width: 590px;
	padding-left:20px;
	height: 100%;
	background:url(../img/right-window-bg.png) repeat-y;
	background-size: contain;
	color: #4da4d7;
}
.right-scroll{
	position:absolute;
	left: 5px;
	top: 50%;
	margin-top: -40px;
	width: 40px;
	height: 80px;
	background: url(../img/right-srcoll.png) no-repeat;
	cursor: pointer;
}
.left-scroll{
	position:absolute;
	right: 5px;
	top: 50%;
	margin-top: -40px;
	width: 40px;
	height: 80px;
	background: url(../img/left-srcoll.png) no-repeat;
	cursor: pointer;
}
.right-scroll:hover,
.left-scroll:hover{opacity: .6;}
.right-window-open h2,
.right-window-open h3{
	font-weight: 100;
}
.right-window-open h2{
	text-align: center;
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 20px;
}
.right-window-open h3{
	font-size: 14px;
	padding-left: 22px;
}
.tide-table{
	margin-bottom: 20px;
	height: auto
}
.tide-table-cont{
	width: 470px;
	color: #4ea7dc;
	font-size: 12px;
	margin: 0 auto;
	padding-left: 10px;
}
.tide-table-cont tr td{
	padding:4px 0;
}
.other-tide{
	width: 100%;
	text-align: center;
	font-size: 15px;
	color: #4ea7dc;
	padding: 20px 0; 
}
.diagram{
	margin-bottom: 50px;
	height: auto;
}
.diagram-cont{
	width: 500px;
	height: 250px;
	border: 0px solid #204763;
	margin: 0 auto;
	margin-top: 20px; 
}
.mete-data{
	height: auto;
	position: relative;
}
.time-weather{
	position: relative;
	width: 520px;
	margin: 0 auto;
	text-align: center;
}
.time-weather img{
	width: 36px;
}
.time-weather p{
	margin: 0;
	padding: 0;
}
.time-weather p.time-text{
	background: #1a8dd2;
	font-size: 10px;
    color: #243845;
	border-radius: 20px;
	text-align: center;
}
.time-weather tr td{
	padding-top: 3px;
	padding-bottom: 3px;
}
.time-weather tr td.tdline{
	border-left: 1px solid #062a40;
	border-bottom: 0;
}
.t-l-max{
	width: 90px;
	margin: 0;
	padding: 0;
	text-align: left;
}
img.maximg{
	width: 53px;
	margin-top:10px;
}
.t-r-max{
	position: absolute;
	top: 0;
	left: 100px;
}
.max-font{
	font-size: 60px;
	color: #1a8dd2;
}
.week-weather{
	width: 550px;
	margin: 20px auto;
	text-align: center;
}
.week-weather img{
	width: 36px;
}
.week-weather tr td{
	padding:4px 0;
}
.invalid{opacity: .5;}
.date-input{
	width: 126px;
	height: 43px;
	line-height: 43px;
	text-align: center;
	background: url(../img/btn-ico1-bg.png) no-repeat;
	border: 0;
	font-size: 18px;
	color: #87b0d0;
}
.date-input:active,
.date-input:focus{
	border: 0;
	outline:none;
	color: #35eae6;
}

.date-control{
	width:166px;
	height:38px;
	margin:35px auto 0 auto;
	background: url(../img/date-control.png) no-repeat;
	cursor: pointer;
}
.date-control:hover{background: url(../img/date-control-on.png) no-repeat;}
.date-control input{
	color:#3bfffa;
	font-size:18px;
	width:153px;
	height:38px;
	line-height:38px;
	padding:0;
	margin-left:15px;
	font-family:Tahoma,Arial;
	font-weight: bold;
	background: transparent;
	border:0;
}


/*气象数据修改*/
.mete-cont{position:relative;width:100%;height:200px;margin-top:10px;}
.front-scroll-ico{
	display:block;
	position: absolute;
	left:0;
	top:70px;
	width:30px;
	height:30px;
	background: url(../img/srcoll-ico.png) 0 0 no-repeat;
}
.back-scroll-ico{
	display:block;
	position: absolute;
	right:0;
	top:70px;
	width:30px;
	height:30px;
	background: url(../img/srcoll-ico.png) -35px 0 no-repeat;
}
.front-scroll-ico:hover,
.back-scroll-ico:hover{opacity:.6;}
.mete-cont-list{ width: 500px; height:200px;margin:0 auto;font-size:16px;clear:both;overflow:hidden;padding-left:10px;}
.mete-cont-list ul{position:relative;width:5000px;}
.mete-cont-list ul li{float:left;position: relative; width:118px;text-align: center; cursor: pointer;margin-right:7px; }
.mete-cont-list ul li:hover{opacity:.6;}
.mete-cont-list p{margin:0;padding:0;line-height:26px;}
/*气象弹出*/
.mete-model{position:absolute;top:-80px;left:30px;width:520px;height:auto;font-size:12px;z-index: 100;}
.mete-model-title{
	width: 520px;
	height: 27px;
	background: url(../img/model-bg_01max.png) no-repeat;
}
.mete-model-cont{
	width: 520px;
	background: url(../img/model-bg_02max.png) repeat;
}
.mete-model-cont p{
	margin:0;
	padding:0 25px 0 25px;
	line-height: 20px;
}
.mete-model-bottom{
	width:520px;
	height:26px;
	background: url(../img/model-bg_03max.png) no-repeat;
}
.on-arrow{
	display:block;
	position:relative;
	top:0; 
	width:21px;
	height:10px;
	margin:0 auto;
	background: url(../img/on-arrow.png) no-repeat;
	z-index:500;
}
.metemodel-table{
	width: 470px;
	color: #4ea7dc;
	margin: 0 auto;
	padding-left: 10px;
}
.metemodel-table tr td{
	padding:4px 0;
	text-align: left;
	font-size: 14px;
}
.t-b{width: auto;color:#30deec;}